import * as CommonSelectors from '../lib/common_selectors';
import doubleClickZoom from '../lib/double_click_zoom';
import * as Constants from '../constants';
import circle from '@turf/circle';
import * as turfHelpers from '@turf/helpers';
import distance from '@turf/distance';
//圆
const DRAW_CIRCLE = {};

DRAW_CIRCLE.onSetup = function() {
  const polygon = this.newFeature({
    type: Constants.geojsonTypes.FEATURE,
    properties: {
      type: 'circle',
      isCircle: 'true',
      points: []
    },
    geometry: {
      type: Constants.geojsonTypes.POLYGON,
      coordinates: [[]]
    }
  });

  this.addFeature(polygon);

  this.clearSelectedFeatures();
  doubleClickZoom.disable(this);
  // dragPan.disable(this);
  this.map.dragPan.disable();
  this.updateUIClasses({ mouse: Constants.cursors.ADD });
  this.activateUIButton(Constants.types.POLYGON);
  this.setActionableState({
    trash: true
  });

  return {
    polygon,
    currentVertexPosition: 0
  };
};

DRAW_CIRCLE.clickAnywhere = function(state, e) {
  if (state.currentVertexPosition === 0) {
    // const _initialRadiusInKm = state.initialRadiusInKm?state.initialRadiusInKm:0;
    state.currentVertexPosition++;
    // if(!e.lngLat.lng || !e.lngLat.lng) return ;
    // const center = [e.lngLat.lng, e.lngLat.lat];
    // const circleFeature = circle(center, _initialRadiusInKm);
    // state.polygon.incomingCoords(circleFeature.geometry.coordinates);
    // state.polygon.properties.center = center;
    // state.polygon.properties.radiusInKm = _initialRadiusInKm;
    return ;
  }
  return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
};

DRAW_CIRCLE.onMouseMove = function(state, e) {
  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
  if (CommonSelectors.isVertex(e)) {
    this.updateUIClasses({ mouse: Constants.cursors.POINTER });
  }
};

DRAW_CIRCLE.onTap = DRAW_CIRCLE.onClick = function(state, e) {
  console.log(state.polygon.coordinates[0]);
  if (CommonSelectors.isVertex(e)) return this.clickOnVertex(state, e);
  return this.clickAnywhere(state, e);
};

DRAW_CIRCLE.onKeyUp = function(state, e) {
  if (CommonSelectors.isEscapeKey(e)) {
    this.deleteFeature([state.polygon.id], { silent: true });
    this.changeMode(Constants.modes.SIMPLE_SELECT);
  } else if (CommonSelectors.isEnterKey(e)) {
    this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
  }
};

DRAW_CIRCLE.onStop = function(state) {
  this.updateUIClasses({ mouse: Constants.cursors.NONE });
  doubleClickZoom.enable(this);
  this.activateUIButton();

  // check to see if we've deleted this feature
  if (this.getFeature(state.polygon.id) === undefined) return;

  //remove last added coordinate
  // state.polygon.removeCoordinate(`0.${state.currentVertexPosition}`);
  if (state.polygon.isValid()) {
    this.map.fire(Constants.events.CREATE, {
      features: [state.polygon.toGeoJSON()]
    });
  } else {
    this.deleteFeature([state.polygon.id], { silent: true });
    this.changeMode(Constants.modes.SIMPLE_SELECT, {}, { silent: true });
  }
};

DRAW_CIRCLE.toDisplayFeatures = function(state, geojson, display) {

  const isActivePolygon = geojson.properties.id === state.polygon.id;
  geojson.properties.active = (isActivePolygon) ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
  return display(geojson);
  // const isActivePolygon = geojson.properties.id === state.polygon.id;
  // geojson.properties.active = (isActivePolygon) ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
  // if (!isActivePolygon) return display(geojson);
  //
  // // Don't render a polygon until it has two positions
  // // (and a 3rd which is just the first repeated)
  // if (geojson.geometry.coordinates.length === 0) return;
  //
  // const coordinateCount = geojson.geometry.coordinates[0].length;
  // // 2 coordinates after selecting a draw type
  // // 3 after creating the first point
  // if (coordinateCount < 3) {
  //   return;
  // }
  // geojson.properties.meta = Constants.meta.FEATURE;
  // display(createVertex(state.polygon.id, geojson.geometry.coordinates[0][0], '0.0', false));
  // if (coordinateCount > 3) {
  //   // Add a start position marker to the map, clicking on this will finish the feature
  //   // This should only be shown when we're in a valid spot
  //   const endPos = geojson.geometry.coordinates[0].length - 3;
  //   display(createVertex(state.polygon.id, geojson.geometry.coordinates[0][endPos], `0.${endPos}`, false));
  // }
  // if (coordinateCount <= 4) {
  //   // If we've only drawn two positions (plus the closer),
  //   // make a LineString instead of a Polygon
  //   const lineCoordinates = [
  //     [geojson.geometry.coordinates[0][0][0], geojson.geometry.coordinates[0][0][1]], [geojson.geometry.coordinates[0][1][0], geojson.geometry.coordinates[0][1][1]]
  //   ];
  //   // create an initial vertex so that we can track the first point on mobile devices
  //   display({
  //     type: Constants.geojsonTypes.FEATURE,
  //     properties: geojson.properties,
  //     geometry: {
  //       coordinates: lineCoordinates,
  //       type: Constants.geojsonTypes.LINE_STRING
  //     }
  //   });
  //   if (coordinateCount === 3) {
  //     return;
  //   }
  // }
  // // render the Polygon
  // return display(geojson);
};

DRAW_CIRCLE.onTrash = function(state) {
  this.deleteFeature([state.polygon.id], { silent: true });
  this.changeMode(Constants.modes.SIMPLE_SELECT);
};


DRAW_CIRCLE.onMouseDown = DRAW_CIRCLE.onTouchStart = function (state, e) {
  const currentCenter = state.polygon.properties.points;
  if (currentCenter.length <2) {
    state.polygon.properties.points.push([e.lngLat.lng, e.lngLat.lat]) ;
  }
};

DRAW_CIRCLE.onDrag = DRAW_CIRCLE.onMouseMove = function (state, e) {
  const points = state.polygon.properties.points;
  if (points.length > 0) {
    const distanceInKm = distance(
      turfHelpers.point(points[0]),
      turfHelpers.point([e.lngLat.lng, e.lngLat.lat]),
      { units : 'kilometers'});
    const circleFeature = circle(points[0], distanceInKm);
    state.polygon.incomingCoords(circleFeature.geometry.coordinates);
    state.polygon.properties.radiusInKm = distanceInKm;
  }
};

DRAW_CIRCLE.onMouseUp = DRAW_CIRCLE.onTouchEnd = function (state, e) {
  this.map.dragPan.enable();
  return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
};
export default DRAW_CIRCLE;


